<template>
<!--  TODO 公司详情页面    有点懒得做mock了，就用这个吧-->
  <view style="position:relative;">
    <up-swiper
        :list="images"
        keyName="image"
        showTitle
        :autoplay="false"
        circular
        autoplay
        height="450rpx"
    ></up-swiper>
    <view class="company-box">
      <view class="flex-c-center company-title">
        <up-avatar text="犀" random-bg-color size="80"/>
        <view class="mt-10">犀牛支付有限公司</view>
        <view class="f-c-9 f-s-m">互联网/金融/电商/游戏</view>
      </view>
      <view style="margin-top: 200rpx">
        <!--公司卡片-->
        <at-card>
          <view class="bottom-tag fw-600 f-s-xxl">公司介绍</view>
          <view class="mt-20 f-s-l">
            犀牛支付有限公司（RhinoPay）成立于2018年，总部位于上海，是一家专注于「支付+金融+数字化」的软件开发商。公司持有央行《支付业务许可证》，具备银联、VISA、微信、支付宝全通道收单资质，为零售、餐饮、政务、跨境等行业提供一站式支付解决方案。核心产品「RhinoPay
            SDK」覆盖移动端、PC端、IoT设备，支持刷脸、扫码、NFC、数字人民币等全场景收单。累计服务客户超3,000家，年交易笔数突破50亿笔。公司以“安全、稳定、合规”为宗旨，通过PCI-DSS、ISO27001、CMMI5认证，致力于成为全球领先的支付科技服务商。
          </view>
        </at-card>

        <!--公司地址-->
        <at-card>
          <view class="flex-between  mb-20">
            <view class="bottom-tag fw-600 f-s-xxl">公司地址</view>
            <view class="flex" style="color: #ff7100" @click="locationCompany()">
              去这里
              <up-icon name="map" size="16" color="#ff7100"/>
            </view>
          </view>
          <at-map :location="false"/>
        </at-card>

        <!--企业图片-->
        <at-card>
          <view class="flex-between  mb-20" @click="toPath('/work/common/common?type=1')">
            <view class="bottom-tag fw-600 f-s-xxl">企业图片</view>
            <up-icon name="arrow-right" size="16" color="#666"/>
          </view>
          <view class="img-box">
            <up-image :show-loading="true" src="https://picsum.photos/seed/picsum/200/300" width="100%"
                      height="200rpx" mode="aspectFill"></up-image>
            <up-image :show-loading="true" src="https://picsum.photos/seed/picsum/200/300" width="100%"
                      height="200rpx" mode="aspectFill"></up-image>
            <up-image :show-loading="true" src="https://picsum.photos/seed/picsum/200/300" width="100%"
                      height="200rpx" mode="aspectFill"></up-image>
            <up-image :show-loading="true" src="https://picsum.photos/seed/picsum/200/300" width="100%"
                      height="200rpx" mode="aspectFill"></up-image>
          </view>
        </at-card>

        <!--企业评价-->
        <at-card>
          <view class="flex-between  mb-20" @click="toPath('/work/common/common?type=2')">
            <view class="bottom-tag fw-600 f-s-xxl">企业评价（10条）</view>
            <up-icon name="arrow-right" size="16" color="#666"/>
          </view>
          <view class="eva-box">

          </view>
        </at-card>

        <!--在找岗位-->
        <view class="py-30">
          <view class="bottom-tag fw-600 f-s-xxl mx-20 pb-10">在找岗位</view>
          <view v-for="item of workCardDataMock" :key="item.company">
            <work-card :data="item" :type="0"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {navigationFn, toPath} from "@/utils/commonUtils";
import WorkCard from "@/work/components/work-card.vue";
import {workCardDataMock} from "@/utils/mock";

const images = reactive([
  {
    image: 'https://picsum.photos/seed/picsum/400/300',
    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
  },
  {
    image: 'https://picsum.photos/seed/picsum/400/300',
    title: '身无彩凤双飞翼，心有灵犀一点通',
  },
  {
    image: 'https://picsum.photos/seed/picsum/400/300',
    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
  },
]);

function locationCompany() {
  navigationFn({
    latitude: 31.249454,
    longitude: 121.396267,
    name: '犀牛支付有限公司',
    companyDetailAddress: '上海市浦东区'
  })
}
</script>


<style scoped lang="scss">
.company-box {
  position: absolute;
  top: 340rpx;
  background: #fff;
  width: 100%;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  z-index: 20;
  min-height: 100vh;
  padding-bottom: 120rpx;

  .company-title {
    position: absolute;
    top: -80rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
